<template>
  <!-- This footer should be hidden by default and shown when there are todos -->
			<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{tiaoshu}}</strong>条未完成</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters" @click="changeFn">
					<li>
						<a href="#/" :class="{selected:type=='all'}" @click="type='all'">全部</a>
					</li>
					<li>
						<a href="#/active" :class="{selected:type=='no'}" @click="type='no'">未完成</a>
					</li>
					<li>
						<a href="#/completed" :class="{selected:type=='yes'}" @click="type='yes'">已完成</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" v-if="notrue" @click="clear">清空已完成</button>
			</footer>
</template>

<script>
export default {
    data(){
        return{
            type:"all"
        }
    },
props:["arr"],
methods:{
    changeFn(){
this.$emit("switch-todo",this.type)
    },
    clear(){
        this.$emit("clear-todo")
    }
},
computed: {
    tiaoshu(){
        return this.arr.filter(item => item.isDone==false).length
    },
    notrue(){
        return this.arr.some(item =>item.isDone==true)
    }
}
}
</script>

<style>

</style>